<template>
    <div class="profile-page">
        <!-- 顶部用户信息区 -->
        <div class="profile-header">
            <div class="cover-photo" :style="{ backgroundImage: `url(${userData.coverPhoto})` }"></div>
            <div class="profile-info">
                <div class="avatar-container">
                    <img :src="userData.avatar" alt="用户头像" class="avatar" />
                    <button class="edit-avatar-btn">
                        <i class="fas fa-camera"></i>
                    </button>
                </div>
                <div class="user-details">
                    <h1 class="username">{{ userData.name }}</h1>
                    <p class="user-bio">{{ userData.bio }}</p>
                    <div class="user-stats">
                        <div class="stat-item">
                            <span class="stat-number">{{ userData.followers }}</span>
                            <span class="stat-label">粉丝</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">{{ userData.following }}</span>
                            <span class="stat-label">关注</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number">{{ userData.trips }}</span>
                            <span class="stat-label">游记</span>
                        </div>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="edit-profile-btn">编辑资料</button>
                    <button class="message-btn">私信</button>
                </div>
            </div>
        </div>

        <!-- 导航标签 -->
        <div class="profile-nav">
            <button v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.id }"
                @click="activeTab = tab.id">
                {{ tab.label }}
            </button>
        </div>

        <!-- 主要内容区 -->
        <div class="profile-content">
            <!-- 游记标签内容 -->
            <div v-if="activeTab === 'trips'" class="trips-container">
                <div class="section-title">
                    <h2>我的游记</h2>
                    <button class="create-trip-btn">创建新游记</button>
                </div>

                <div class="trips-list">
                    <div v-for="trip in userTrips" :key="trip.id" class="trip-card">
                        <div class="trip-image" :style="{ backgroundImage: `url(${trip.coverImage})` }"></div>
                        <div class="trip-info">
                            <h3>{{ trip.title }}</h3>
                            <div class="trip-meta">
                                <span class="trip-date">{{ trip.date }}</span>
                                <span class="trip-location">
                                    <i class="fas fa-map-marker-alt"></i> {{ trip.location }}
                                </span>
                            </div>
                            <p class="trip-excerpt">{{ trip.excerpt }}</p>
                            <div class="trip-stats">
                                <span><i class="far fa-eye"></i> {{ trip.views }}</span>
                                <span><i class="far fa-heart"></i> {{ trip.likes }}</span>
                                <span><i class="far fa-comment"></i> {{ trip.comments }}</span>
                            </div>
                        </div>
                        <div class="trip-actions">
                            <button class="action-btn edit-btn"><i class="fas fa-edit"></i> 编辑</button>
                            <button class="action-btn delete-btn"><i class="fas fa-trash"></i> 删除</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 收藏标签内容 -->
            <div v-if="activeTab === 'favorites'" class="favorites-container">
                <div class="section-title">
                    <h2>我的收藏</h2>
                </div>

                <div class="favorites-grid">
                    <div v-for="item in favorites" :key="item.id" class="favorite-item">
                        <div class="favorite-image" :style="{ backgroundImage: `url(${item.image})` }">
                            <div class="favorite-type">{{ item.type }}</div>
                        </div>
                        <div class="favorite-info">
                            <h3>{{ item.title }}</h3>
                            <p>{{ item.description }}</p>
                            <div class="favorite-meta">
                                <span><i class="far fa-user"></i> {{ item.author }}</span>
                                <span><i class="far fa-calendar-alt"></i> {{ item.date }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 足迹标签内容 -->
            <div v-if="activeTab === 'footprints'" class="footprints-container">
                <div class="section-title">
                    <h2>我的足迹</h2>
                    <div class="map-toggle">
                        <button :class="{ active: mapView }" @click="mapView = true">
                            <i class="fas fa-map"></i> 地图视图
                        </button>
                        <button :class="{ active: !mapView }" @click="mapView = false">
                            <i class="fas fa-list"></i> 列表视图
                        </button>
                    </div>
                </div>

                <div v-if="mapView" class="map-container">
                    <!-- 这里可以放置地图组件 -->
                    <div class="map-placeholder">
                        <i class="fas fa-map-marked-alt"></i>
                        <p>这里是足迹地图</p>
                    </div>
                </div>

                <div v-else class="footprints-list">
                    <div v-for="place in visitedPlaces" :key="place.id" class="place-card">
                        <div class="place-image" :style="{ backgroundImage: `url(${place.image})` }"></div>
                        <div class="place-info">
                            <h3>{{ place.name }}</h3>
                            <div class="place-location">
                                <i class="fas fa-map-marker-alt"></i> {{ place.location }}
                            </div>
                            <div class="place-date">
                                <i class="far fa-calendar-alt"></i> {{ place.date }}
                            </div>
                            <div class="place-tags">
                                <span v-for="tag in place.tags" :key="tag" class="tag">{{ tag }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设置标签内容 -->
            <div v-if="activeTab === 'settings'" class="settings-container">
                <div class="settings-section">
                    <h3>账号设置</h3>
                    <div class="setting-item">
                        <label>用户名</label>
                        <input type="text" v-model="userData.name" />
                    </div>
                    <div class="setting-item">
                        <label>个人简介</label>
                        <textarea v-model="userData.bio"></textarea>
                    </div>
                    <div class="setting-item">
                        <label>电子邮箱</label>
                        <input type="email" v-model="userData.email" />
                    </div>
                </div>

                <div class="settings-section">
                    <h3>隐私设置</h3>
                    <div class="setting-item toggle-item">
                        <div>
                            <label>公开我的游记</label>
                            <p class="setting-description">其他人可以看到你发布的游记</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox" v-model="privacySettings.publicTrips" />
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="setting-item toggle-item">
                        <div>
                            <label>显示我的位置</label>
                            <p class="setting-description">在游记中显示你的地理位置</p>
                        </div>
                        <label class="switch">
                            <input type="checkbox" v-model="privacySettings.showLocation" />
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>

                <div class="settings-actions">
                    <button class="save-btn">保存设置</button>
                    <button class="logout-btn">退出登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { ref } from 'vue';

    export default {
        name: 'ProfilePage',
        setup() {
            // 用户数据
            const userData = ref({
                name: '旅行达人张小美',
                avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
                coverPhoto: 'https://images.unsplash.com/photo-1499678329028-101435549a4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
                bio: '热爱旅行、摄影和美食的背包客，已经走过30个国家，分享我的旅行故事和经验～',
                email: 'traveler@example.com',
                followers: 1245,
                following: 563,
                trips: 28
            });

            // 隐私设置
            const privacySettings = ref({
                publicTrips: true,
                showLocation: false
            });

            // 标签页
            const tabs = ref([
                { id: 'trips', label: '游记' },
                { id: 'favorites', label: '收藏' },
                { id: 'footprints', label: '足迹' },
                { id: 'settings', label: '设置' }
            ]);
            const activeTab = ref('trips');
            const mapView = ref(false);

            // 用户游记数据
            const userTrips = ref([
                {
                    id: 1,
                    title: '日本关西七日游：京都、大阪、奈良',
                    coverImage: 'https://images.unsplash.com/photo-1492571350019-22de08371fd3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    date: '2023-04-15',
                    location: '日本, 关西',
                    excerpt: '春天的关西地区真是太美了，樱花盛开，古都京都的寺庙和神社在粉色的花海中显得格外宁静。',
                    views: 2456,
                    likes: 345,
                    comments: 78
                },
                {
                    id: 2,
                    title: '云南大理丽江自由行攻略',
                    coverImage: 'https://images.unsplash.com/photo-1547981609-4ab6cc31d8f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    date: '2023-02-10',
                    location: '中国, 云南',
                    excerpt: '大理的洱海和丽江的古城，感受慢生活的美好，推荐几家超棒的民宿和餐厅。',
                    views: 1876,
                    likes: 289,
                    comments: 56
                },
                {
                    id: 3,
                    title: '泰国清迈周末游：大象保护营体验',
                    coverImage: 'https://images.unsplash.com/photo-1528181304800-259b08848526?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    date: '2022-12-05',
                    location: '泰国, 清迈',
                    excerpt: '参加了大象保护营的志愿者活动，与大象亲密接触，学习如何照顾这些温柔的巨人。',
                    views: 3245,
                    likes: 412,
                    comments: 92
                }
            ]);

            // 收藏数据
            const favorites = ref([
                {
                    id: 1,
                    type: '游记',
                    title: '冰岛环岛自驾全攻略',
                    image: 'https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '详细记录了冰岛环岛自驾的路线、景点和注意事项，非常实用。',
                    author: '环球旅行家',
                    date: '2023-05-20'
                },
                {
                    id: 2,
                    type: '餐厅',
                    title: '东京必吃的5家拉面店',
                    image: 'https://images.unsplash.com/photo-1550583720-4fb31ffc0d23?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '从米其林到街头小店，这几家拉面店各具特色，汤底浓郁面条劲道。',
                    author: '美食探索者',
                    date: '2023-04-12'
                },
                {
                    id: 3,
                    type: '酒店',
                    title: '巴厘岛乌布丛林别墅推荐',
                    image: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '隐藏在乌布丛林中的别墅，私人泳池、管家服务，性价比超高。',
                    author: '奢华旅行家',
                    date: '2023-03-28'
                },
                {
                    id: 4,
                    type: '攻略',
                    title: '欧洲火车通票使用指南',
                    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    description: '如何选择和使用欧洲火车通票，省钱又方便的欧洲旅行方式。',
                    author: '背包客小张',
                    date: '2023-02-15'
                }
            ]);

            // 足迹数据
            const visitedPlaces = ref([
                {
                    id: 1,
                    name: '清水寺',
                    image: 'https://images.unsplash.com/photo-1545566238-6a541cfafc43?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    location: '日本, 京都',
                    date: '2023-04-18',
                    tags: ['世界遗产', '寺庙', '樱花']
                },
                {
                    id: 2,
                    name: '洱海',
                    image: 'https://images.unsplash.com/photo-1547981609-4ab6cc31d8f7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    location: '中国, 大理',
                    date: '2023-02-12',
                    tags: ['湖泊', '骑行', '摄影']
                },
                {
                    id: 3,
                    name: '大象保护营',
                    image: 'https://images.unsplash.com/photo-1528181304800-259b08848526?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    location: '泰国, 清迈',
                    date: '2022-12-07',
                    tags: ['动物保护', '志愿者', '生态旅游']
                },
                {
                    id: 4,
                    name: '埃菲尔铁塔',
                    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60',
                    location: '法国, 巴黎',
                    date: '2022-08-22',
                    tags: ['地标', '夜景', '浪漫']
                }
            ]);

            return {
                userData,
                privacySettings,
                tabs,
                activeTab,
                mapView,
                userTrips,
                favorites,
                visitedPlaces
            };
        }
    };
</script>

<style scoped>
    /* 基础样式 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: #f5f5f5;
        color: #333;
    }

    .profile-page {
        max-width: 1200px;
        margin: 0 auto;
        background-color: #fff;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    /* 顶部用户信息区 */
    .profile-header {
        position: relative;
    }

    .cover-photo {
        height: 300px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .profile-info {
        display: flex;
        padding: 0 40px;
        margin-top: -75px;
        position: relative;
        z-index: 1;
        align-items: flex-end;
    }

    .avatar-container {
        position: relative;
        margin-right: 30px;
    }

    .avatar {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 5px solid #fff;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        object-fit: cover;
    }

    .edit-avatar-btn {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #4CAF50;
        color: white;
        border: none;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .user-details {
        flex: 1;
    }

    .username {
        font-size: 28px;
        margin-bottom: 10px;
        color: #333;
    }

    .user-bio {
        font-size: 16px;
        color: #666;
        margin-bottom: 15px;
        max-width: 600px;
    }

    .user-stats {
        display: flex;
        gap: 30px;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .stat-number {
        font-size: 20px;
        font-weight: bold;
        color: #333;
    }

    .stat-label {
        font-size: 14px;
        color: #777;
    }

    .action-buttons {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
    }

    .edit-profile-btn,
    .message-btn {
        padding: 10px 20px;
        border-radius: 20px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
    }

    .edit-profile-btn {
        background-color: #4CAF50;
        color: white;
        border: none;
    }

    .edit-profile-btn:hover {
        background-color: #3d8b40;
    }

    .message-btn {
        background-color: #fff;
        color: #4CAF50;
        border: 2px solid #4CAF50;
    }

    .message-btn:hover {
        background-color: #f0f9f0;
    }

    /* 导航标签 */
    .profile-nav {
        display: flex;
        border-bottom: 1px solid #eee;
        margin-top: 20px;
        padding: 0 40px;
    }

    .profile-nav button {
        padding: 15px 25px;
        background: none;
        border: none;
        font-size: 16px;
        font-weight: 500;
        color: #666;
        cursor: pointer;
        position: relative;
    }

    .profile-nav button.active {
        color: #4CAF50;
        font-weight: 600;
    }

    .profile-nav button.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #4CAF50;
    }

    /* 主要内容区 */
    .profile-content {
        padding: 30px 40px;
    }

    .section-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 25px;
    }

    .section-title h2 {
        font-size: 22px;
        color: #333;
    }

    .create-trip-btn {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .create-trip-btn:hover {
        background-color: #3d8b40;
    }

    /* 游记列表样式 */
    .trips-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .trip-card {
        display: flex;
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .trip-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .trip-image {
        width: 250px;
        height: 200px;
        background-size: cover;
        background-position: center;
        flex-shrink: 0;
    }

    .trip-info {
        flex: 1;
        padding: 20px;
    }

    .trip-info h3 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #333;
    }

    .trip-meta {
        display: flex;
        gap: 15px;
        margin-bottom: 10px;
        font-size: 14px;
        color: #777;
    }

    .trip-excerpt {
        margin-bottom: 15px;
        color: #555;
        line-height: 1.5;
    }

    .trip-stats {
        display: flex;
        gap: 20px;
        font-size: 14px;
        color: #777;
    }

    .trip-stats i {
        margin-right: 5px;
    }

    .trip-actions {
        display: flex;
        flex-direction: column;
        padding: 20px;
        gap: 10px;
        border-left: 1px solid #eee;
    }

    .action-btn {
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .edit-btn {
        background-color: #f0f9f0;
        color: #4CAF50;
        border: 1px solid #4CAF50;
    }

    .edit-btn:hover {
        background-color: #e0f0e0;
    }

    .delete-btn {
        background-color: #fff0f0;
        color: #f44336;
        border: 1px solid #f44336;
    }

    .delete-btn:hover {
        background-color: #ffe0e0;
    }

    /* 收藏网格样式 */
    .favorites-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .favorite-item {
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .favorite-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .favorite-image {
        height: 150px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .favorite-type {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(76, 175, 80, 0.9);
        color: white;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 12px;
    }

    .favorite-info {
        padding: 15px;
    }

    .favorite-info h3 {
        font-size: 16px;
        margin-bottom: 8px;
        color: #333;
    }

    .favorite-info p {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .favorite-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
    }

    .favorite-meta i {
        margin-right: 5px;
    }

    /* 足迹样式 */
    .map-toggle {
        display: flex;
        gap: 10px;
    }

    .map-toggle button {
        padding: 8px 12px;
        background-color: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .map-toggle button.active {
        background-color: #4CAF50;
        color: white;
        border-color: #4CAF50;
    }

    .map-container {
        height: 400px;
        background-color: #f9f9f9;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #777;
    }

    .map-placeholder {
        text-align: center;
    }

    .map-placeholder i {
        font-size: 50px;
        margin-bottom: 15px;
        color: #4CAF50;
    }

    .footprints-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .place-card {
        border: 1px solid #eee;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .place-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .place-image {
        height: 150px;
        background-size: cover;
        background-position: center;
    }

    .place-info {
        padding: 15px;
    }

    .place-info h3 {
        font-size: 16px;
        margin-bottom: 8px;
        color: #333;
    }

    .place-location,
    .place-date {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
    }

    .place-location i,
    .place-date i {
        margin-right: 5px;
        color: #4CAF50;
    }

    .place-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 10px;
    }

    .tag {
        background-color: #f0f9f0;
        color: #4CAF50;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 12px;
    }

    /* 设置样式 */
    .settings-section {
        margin-bottom: 30px;
    }

    .settings-section h3 {
        font-size: 18px;
        margin-bottom: 15px;
        color: #333;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .setting-item {
        margin-bottom: 15px;
    }

    .setting-item label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #555;
    }

    .setting-item input,
    .setting-item textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .setting-item textarea {
        min-height: 100px;
        resize: vertical;
    }

    .toggle-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .setting-description {
        font-size: 12px;
        color: #999;
        margin-top: 3px;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
    }

    input:checked+.slider {
        background-color: #4CAF50;
    }

    input:checked+.slider:before {
        transform: translateX(26px);
    }

    .slider.round {
        border-radius: 24px;
    }

    .slider.round:before {
        border-radius: 50%;
    }

    .settings-actions {
        display: flex;
        justify-content: flex-end;
        gap: 15px;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .save-btn,
    .logout-btn {
        padding: 10px 20px;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s;
    }

    .save-btn {
        background-color: #4CAF50;
        color: white;
        border: none;
    }

    .save-btn:hover {
        background-color: #3d8b40;
    }

    .logout-btn {
        background-color: #fff;
        color: #f44336;
        border: 1px solid #f44336;
    }

    .logout-btn:hover {
        background-color: #fff0f0;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
        .trip-card {
            flex-direction: column;
        }

        .trip-image {
            width: 100%;
            height: 200px;
        }

        .trip-actions {
            flex-direction: row;
            border-left: none;
            border-top: 1px solid #eee;
            justify-content: flex-end;
        }
    }

    @media (max-width: 768px) {
        .profile-info {
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-top: -100px;
        }

        .avatar-container {
            margin-right: 0;
            margin-bottom: 15px;
        }

        .user-stats {
            justify-content: center;
        }

        .action-buttons {
            margin-top: 15px;
        }

        .profile-nav {
            overflow-x: auto;
            white-space: nowrap;
            padding: 0 20px;
        }

        .profile-content {
            padding: 20px;
        }
    }
</style>